<template>
	<!--重点产品现状分析功能-->
	<div class="product-status">
		<div class="border">
			<el-row gutter="26">
				<el-col span="8">
					<chart-block chartID="chart1" :title="barBlockOptionData.title" :optionData="barBlockOptionData" chartType="getPictorialBar" height="35.3vh"></chart-block>
				</el-col>
				<el-col span="8">
					<chart-block chartID="chart2" :title="barOptionData.title" :optionData="barOptionData" chartType="getBar" height="35.3vh"></chart-block>
				</el-col>
				<el-col span="8">
					<chart-block chartID="chart3" :title="singleLineOptionData.title" :optionData="singleLineOptionData" chartType="getSingleLine" height="35.3vh" productBtnShow="true"></chart-block>
				</el-col>
			</el-row>
			<el-row gutter="26" style="margin-top:2.6vh">
				<el-col span="8">
					<chart-block chartID="chart4" :title="barBlockOptionData2.title" :optionData="barBlockOptionData2" chartType="getPictorialBar" height="35.3vh" titleType="blueBig"></chart-block>
				</el-col>
				<el-col span="8">
					<chart-block chartID="chart5" :title="barOptionData2.title" :optionData="barOptionData2" chartType="getBar" height="35.3vh"></chart-block>
				</el-col>
				<el-col span="8">
					<chart-block chartID="chart6" :title="singleLineOptionData2.title" :optionData="singleLineOptionData2" chartType="getSingleLine" height="35.3vh" productBtnShow="true"></chart-block>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import {getCommonData10} from "@/api/pages";

export default {
	name: "product-status",
	components: {
		ChartBlock: () => import('@/components/chart-block'),
	},
	props: {},
	data() {
		return {
			barBlockOptionData:{
				// title:'',
				// categoryAxis:[], //类目轴数据
				// seriesData:[{
				// 	name:'', //如果有图例，这个就不能为空
				// 	data:[], //数据
				// 	unit:'', //数据的单位
				// },],
				// left:100,
				// right:40,
				// colorList:['#3f6af2','#3f6af2'],
				// BarGradientColor:{
				// 	topColor:'#5a42ec',//rgba(12,57,121,0.35)
				// 	bottomColor:'#09bbfe'
				// },
				// symbolSize:['123%','100%'],
				// backgroundColor: 'rgba(12,51,127,0.35)',
				// lineClick:true,
				// labelPosition: [-55, 0],
				// symbolOffset:[8, 0],
				// dataMin: 0,
				lineClick:true,
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				// labelRorate: true,
				LinearGradientColor: [//柱状图渐变色
					{
						topColor:'#4cc4fc',
						bottomColor:'#3056f7'
					},
				],
			},
			barOptionData:{
				title:'',
				categoryAxis:[], //类目轴数据
				seriesData:[{
					name:'', //如果有图例，这个就不能为空
					data:[], //数据
					unit:'', //数据的单位
				},],
				LinearGradientColor:[
					{
						topColor:'#4cc4fc',
						bottomColor:'#3056f7'
					}
				],
				barWidth:'40%',
				showBackground:true,
				backgroundColor:'rgba(85,111,181,0.2)',
				lineClick:true
			},
			singleLineOptionData:{
				title:'',
				categoryAxis:[], //类目轴数据
				seriesData:[
					{
						name:'', //如果有图例，这个就不能为空
						data:[], //数据
						unit:'', //数据的单位
					},{
						name:'', //如果有图例，这个就不能为空
						data:[], //数据
						unit:'', //数据的单位
					},
				],
				LinearGradientColor: [//渐变色
					{ //折线图两侧竖线数据渐变色
						topColor: "rgba(20, 208, 225,1)",
						bottomColor: "rgba(20, 208, 225,0)"
					},
					{//折线图填充区域渐变色
						topColor: "rgba(20, 208, 225,.2)",
						bottomColor: "rgba(20, 208, 225, 0)"
					},
				],
				LineCircleColor: "#14d0e1",//折线图颜色
				LineCircleBorderColor: "#14d0e1",//折线图描边颜色
			},
			barBlockOptionData2:{
				// title:'',
				// categoryAxis:[], //类目轴数据
				// seriesData: [
				// 	{
				// 		name: '', //如果有图例，这个就不能为空
				// 		data: [], //数据
				// 		unit: '', //数据的单位
				// 	},
				// ],
				// left:120,
				// right:40,
				// colorList:['#f46409','#f46409'],
				// BarGradientColor:{
				// 	topColor:'#f46409',
				// 	bottomColor:'#b8e33f'
				// },
				// symbolSize:['123%','100%'],
				// backgroundColor: 'rgba(22,98,12,0.25)',
				// labelPosition: [-85, 0],
				// symbolOffset:[8, 0],
				// dataMin: 0,
				// axisLabelMargin: 105,
				// backgroundOffset: [-110, 0],
				// lineClick:true,
				lineClick:true,
				title: '',
				labelRorate: true,
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor: [//柱状图渐变色
					{
						topColor:'#f7e030',
						bottomColor:'#fc924c'
					},
				],
			},
			barOptionData2:{
				title:'',
				categoryAxis:[], //类目轴数据
				seriesData:[{
					name:'', //如果有图例，这个就不能为空
					data:[], //数据
					unit:'', //数据的单位
				},],
				LinearGradientColor:[
					{
						topColor:'#f7e030',
						bottomColor:'#fc924c'
					}
				],
				barWidth:'40%',
				showBackground:true,
				backgroundColor:'rgba(18,163,85,0.2)',
				lineClick:true,
				labelRorate:true,
			},
			singleLineOptionData2:{
				title:'',
				categoryAxis:[], //类目轴数据
				seriesData:[
					{
						name:'', //如果有图例，这个就不能为空
						data:[], //数据
						unit:'', //数据的单位
					},{
						name:'', //如果有图例，这个就不能为空
						data:[], //数据
						unit:'', //数据的单位
					},
				],
				LinearGradientColor: [//渐变色
					{ //折线图两侧竖线数据渐变色
						topColor: "rgba(247, 240, 50,1)",
						bottomColor: "rgba(247, 240, 50,0)"
					},
					{//折线图填充区域渐变色
						topColor: "rgba(247, 240, 50,.2)",
						bottomColor: "rgba(247, 240, 50, 0)"
					},
				],
				LineCircleColor: "#f7f032",//折线图颜色
				LineCircleBorderColor: "#f7f032",//折线图描边颜色
				lineRadiusColor: "#f7f032",//折线图圆点颜色
			},
		}
	},
	computed: {},
	created() {
		this.getYieldChange()
		this.getIndustrialYieldChange()
		this.getOutputComparison()
		this.getIndustrialOutputComparison()
		this.getCottonYieldChange()
		this.getCoalYieldChange()
	},
	mounted() {
	},
	methods: {
		// 主要农产品产量环比增速变化
		getYieldChange() {
			getCommonData10({busiCode: 'E105'}).then(res => {
				if (res.data.code === 200) {
					this.barBlockOptionData.title = res.data.data.title
					this.barBlockOptionData.categoryAxis = res.data.data.categoryAxis
					this.barBlockOptionData.seriesData = res.data.data.seriesData
					// let data = res.data.data
					// this.barBlockOptionData.title = data.title
					// this.barBlockOptionData.categoryAxis = data.categoryAxis
					// let seriesData = []
					// this.barBlockOptionData.total = Math.max(...data.seriesData[0].data)
					// this.barBlockOptionData.categoryAxis.forEach((item,index)=>{
					// 	seriesData.push({name:item,value:data.seriesData[0].data[index]})
					// })
					// this.barBlockOptionData.seriesData = seriesData
					// this.barBlockOptionData.symbolSize = window.innerWidth <= 1400 ? ['138%','100%'] : window.innerWidth <= 1600 ? ['134%','100%'] : ['123%','100%']
				}
			}).catch(err => {
				alert(err)
			})
		},
		// 主要工业产品产量环比增速变化
		getIndustrialYieldChange() {
			getCommonData10({busiCode: 'E106'}).then(res => {
				if (res.data.code === 200) {
					this.barBlockOptionData2.title = res.data.data.title
					this.barBlockOptionData2.categoryAxis = res.data.data.categoryAxis
					this.barBlockOptionData2.seriesData = res.data.data.seriesData
					// let data = res.data.data
					// this.barBlockOptionData2.title = data.title
					// this.barBlockOptionData2.categoryAxis = data.categoryAxis
					// let seriesData = []
					// this.barBlockOptionData2.total = Math.max(...data.seriesData[0].data)
					// this.barBlockOptionData2.categoryAxis.forEach((item,index)=>{
					// 	seriesData.push({name:item,value:data.seriesData[0].data[index]})
					// })
					// this.barBlockOptionData2.seriesData = seriesData
					// this.barBlockOptionData2.symbolSize = window.innerWidth <= 1400 ? ['150%','100%'] : window.innerWidth <= 1600 ? ['138%','100%'] : ['130%','100%']
				}
			}).catch(err => {
				alert(err)
			})
		},
		// 主要农产品产量对比
		getOutputComparison() {
			getCommonData10({busiCode: 'E107'}).then(res => {
				if (res.data.code === 200) {
					let data = res.data.data
					this.barOptionData.title = data.title
					this.barOptionData.categoryAxis = data.categoryAxis
					this.barOptionData.seriesData = data.seriesData
				}
			}).catch(err => {
				alert(err)
			})
		},
		// 主要工业产品产量对比
		getIndustrialOutputComparison() {
			getCommonData10({busiCode: 'E108'}).then(res => {
				if (res.data.code === 200) {
					let data = res.data.data
					this.barOptionData2.title = data.title
					this.barOptionData2.categoryAxis = data.categoryAxis
					this.barOptionData2.seriesData = data.seriesData
				}
			}).catch(err => {
				alert(err)
			})
		},
		// 棉花产量变化
		getCottonYieldChange() {
			getCommonData10({busiCode: 'E116'}).then(res => {
				if (res.data.code === 200) {
					let data = res.data.data
					this.singleLineOptionData.title = data.title
					this.singleLineOptionData.categoryAxis = data.categoryAxis
					this.singleLineOptionData.seriesData = data.seriesData
					//折线图两侧竖线
					let seriesData1 = []
					this.singleLineOptionData.seriesData[0].data.forEach((item, index) => {
						if (index === 0 || index === this.singleLineOptionData.seriesData[0].data.length - 1) {
							seriesData1.push(item)
						} else {
							seriesData1.push(0)
						}
					})
					this.singleLineOptionData.seriesData[1] = this.singleLineOptionData.seriesData[0]
					this.singleLineOptionData.seriesData[0] = {data: seriesData1}
				}
			}).catch(err => {
				alert(err)
			})
		},
		// 原煤产量变化
		getCoalYieldChange() {
			getCommonData10({busiCode: 'E111',cpmc:'原煤'}).then(res => {
				if (res.data.code === 200) {
					let data = res.data.data
					this.singleLineOptionData2.title = data.title
					this.singleLineOptionData2.categoryAxis = data.categoryAxis
					this.singleLineOptionData2.seriesData = data.seriesData
					//折线图两侧竖线
					let seriesData1 = []
					this.singleLineOptionData2.seriesData[0].data.forEach((item, index) => {
						if (index === 0 || index === this.singleLineOptionData2.seriesData[0].data.length - 1) {
							seriesData1.push(item)
						} else {
							seriesData1.push(0)
						}
					})
					this.singleLineOptionData2.seriesData[1] = this.singleLineOptionData2.seriesData[0]
					this.singleLineOptionData2.seriesData[0] = {data: seriesData1}
				}
			}).catch(err => {
				alert(err)
			})
		},
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.product-status {
	width:100%;
	height:100%;
	padding: 6vh 2.86vw 4vh;
	.border {
		width:100%;
		height:100%;
		padding:4.7vh 1.3vw;
		border:#0e7fd6 solid 1px;
		background-color:rgba(4,35,162,0.08);
	}
}
</style>
